<template>
  <div :class="`bg-background flex flex-col justify-center items-center theme-${theme}`">
    <p class="mb-10 text-primary">当前主题：{theme}</p>
    <span class="text-primary/[0.5]">点击下方按钮切换主题</span>
    <div class="mt-10 pb-6">
      <p class="mb-10 text-primary">当前主题：{{ theme }}</p>
      <div class="flex flex-row gap-3">
        <button class="bg-primary p-3" v-for="singleTheme in themes" :key="theme" @click="() => (theme = singleTheme)">
          {{ singleTheme }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const themes = ['nord', 'solarizedDark', 'solarizedLight']
const theme = ref<string>('nord')
</script>

<style scoped></style>
